<template>
    <div style="width: 800px;">
        <div
            ref="editor"
            class="successEditor"
        ></div>
        <div style="margin-top: 10px;text-align: center">
            <el-button
                type="success"
                @click="submit"
            >提交</el-button>
            <el-button
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
    </div>
</template>

<script>
import E from "wangeditor";
export default {
    data() {
        return {
            success: {},
            editor: null
        };
    },
    methods: {
        // 初始化富文本编辑器
        initEditor() {
            this.editor = new E(this.$refs.editor);
            // this.editor.customConfig.uploadImgShowBase64 = true;
            this.editor.customConfig.showLinkImg = false;
            this.editor.customConfig.onchange = html => {
                this.editorContent = html;
            };
            this.editor.customConfig.zIndex = 100;
            this.editor.create();
        },
        getSuccesses() {
            this.$http("/success/getAll")
                .then(response => {
                    this.success = response.data[0];
                    this.editor.txt.html(this.success.content);
                })
                .catch(err => err);
        },
        submit() {
            this.success.content = this.editor.txt.html();
            this.$http({
                url: "/success/update",
                method: "post",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded; charset=UTF-8"
                },
                params: this.success
            })
                .then(response => {
                    this.$message({
                        message: response.data.message,
                        type: "success"
                    });
                    this.getSuccesses();
                })
                .catch(err => err);
        },
        reset() {
            this.getSuccesses();
        }
    },
    mounted() {
        this.getSuccesses();
        this.initEditor();
    }
};
</script>

<style>
.successEditor {
    border: 1px solid #ccc; /*设置下拉棒*/
}
</style>